<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta content="text/html;charset=UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>The OpenAPI Specification Tools - Compatibility Validator</title>

  <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Navbar content -->
    <a class="navbar-brand" href="#">Apache ServiceComb Toolkit OAS Validator</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#" th:href="@{/}">首页</a>
        </li>
      </ul>
    </div>
  </nav>
  
  <div style="height: 50px;"></div>

  <div class="container">

    <h2>兼容性检查 &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 1rem;">[<a href="https://github.com/apache/servicecomb-toolkit/blob/master/oas-validator/README.md" target="_blank">文档</a>]</span> </h2>
    <div class="" style="height: 20px;"></div>
    
    <div>
      <textarea name="leftYaml" placeholder="旧 OpenAPI Document（yaml）" style="width: 45%; height: 480px;"></textarea>
      <textarea name="rightYaml" placeholder="新 OpenAPI Document（yaml）" style="width: 45%; height: 480px;"></textarea>
      <div>
      <button id="compatibilityValidate" class="btn btn-info">兼容性检查</button>
      </div>
    </div>
  
    <div class="" style="height: 20px;"></div>
  
    <div>
      <code id="compatibilityViolations"></code>
    </div>

    <div class="" style="height: 20px;"></div>
  
  </div>

  <script type="text/javascript" src="" th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
  <script type="text/javascript" src="" th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.js}"></script>
  
  <script type="text/javascript">
    var addParseErrors = function(element, title, parseErrors) {

      if (parseErrors && parseErrors.length > 0) {
        element.append(title + ' parse errors:');
        element.append("<br/>");
        $.each(parseErrors, function(i) {
          var parseError = parseErrors[i];
          element.append(parseError);
          element.append("<br/>");
        })
        return false;
      }
      return true;
    }

  $(function(){
    
    $('#compatibilityValidate').on('click', function(e) {
      var url = "/api/compatibility";
  
      var rightYaml = $('textarea[name="rightYaml"]').val(); if (rightYaml=="") {return;}
      var leftYaml = $('textarea[name="leftYaml"]').val(); if (leftYaml=="") {return;}
      
      var data = leftYaml + "\n---\n" + rightYaml;
      
      post(url, data, function(json) {
        console.log(json);
        

        if (!json.acknowleged) {
          alert('出错了');
        }
        
        var data = json.data;
        var compatibilityViolations = $("#compatibilityViolations");
        compatibilityViolations.empty();

        if (!addParseErrors(compatibilityViolations, 'Old version', data.leftParseErrors)) {
          return;
        }
        if (!addParseErrors(compatibilityViolations, 'New version', data.rightParseErrors)) {
          return;
        }
        var violations = data.violations;
        
        if (violations && violations.length == 0) {
          alert('文档兼容');
        }
        

        $.each(violations, function(i) {
          var violation = violations[i];
          
          var leftLocationPath = "";
          if (violation.leftLocation) {
            $.each(violation.leftLocation.path, function(j) {
              var p = violation.leftLocation.path[j];
              leftLocationPath += p.name+'.';
            });
            if (leftLocationPath.length > 0) {
            	leftLocationPath = leftLocationPath.substring(0, leftLocationPath.length-1);
            }
          }
          
          var rightLocationPath = "";
          if (violation.rightLocation) {
            $.each(violation.rightLocation.path, function(j) {
              var p = violation.rightLocation.path[j];
              rightLocationPath += p.name+'.';
            });
            if (rightLocationPath.length > 0) {
            	rightLocationPath = rightLocationPath.substring(0, rightLocationPath.length-1);
            }
          }

          var errorInfo = leftLocationPath + " -> " + rightLocationPath + " : " + violation.error;

          compatibilityViolations.append(errorInfo);
          compatibilityViolations.append("<br/>");
        });
        
      });
    });
  
  });
  
  function post(url, data, cb) {// application/json // text/plain
    
    $.ajax({
      url: url, 
      data: data,
      type: 'post',
      headers: {
        "Accept": "application/json; charset=utf-8", 
        "Content-Type": "text/plain; charset=utf-8"
      },
      success: function(json) {
        cb(json);
      }
    });
    
  }
  
  </script>

</body>

</html>
